| ... | ... | |
|---|
| 123 | 123 | || |
|---|
| 124 | 124 | ||<-2> 모서리 곡률 지정 || {{{border-radius=픽셀}}} ||이미지 파일의 모서리 곡률을 지정할 수 있는 문법입니다. || |
|---|
| 125 | 125 | ||<-2> 픽셀화 || {{{rendering=pixelated}}} ||비트맵 이미지는 자동으로 [[안티에일리어싱]]이 적용되어 나오는데, 이를 적용되지 않게 해 줍니다. 픽셀의 수가 적은 비트맵 이미지를 확대하면 이 [[안티에일리어싱]]으로 인해 이미지가 흐리게 나오는데, 이를 선명하게 표시하여야 할 때 유용한 속성입니다. || |
|---|
| 126 | | ||<-2><|5> 크기 맞춤 || {{{object-fit=fill}}} ||{{{#!wiki style="display: flex" |
|---|
| 127 | | {{{#!wiki style="border: 2px solid #888; background: #ddd; margin-right: 10px; height: fit-content" |
|---|
| 128 | | [[파일:로고1.png|width=120&height=120&object-fit=fill]] |
|---|
| 129 | | }}} {{{#!wiki style="margin-top: -15px" |
|---|
| 130 | | {{{원본: 200x100 |
|---|
| 131 | | 매개변수: width=120&height=120&object-fit=fill |
|---|
| 132 | | }}} 지정된 너비와 높이에 맞게 이미지가 늘려서 조절됩니다. 이미지가 왜곡될 수 있습니다. 기본값입니다. svg 파일은 {{{object-fit=contain}}}으로 표시됩니다.}}}}}} || |
|---|
| 133 | | || {{{object-fit=contain}}} ||{{{#!wiki style="display: flex" |
|---|
| 134 | | {{{#!wiki style="border: 2px solid #888; background: #ddd; margin-right: 10px; height: fit-content" |
|---|
| 135 | | [[파일:로고1.png|width=120&height=120&object-fit=contain]] |
|---|
| 136 | | }}} {{{#!wiki style="margin-top: -15px" |
|---|
| 137 | | {{{원본: 200x100 |
|---|
| 138 | | 매개변수: width=120&height=120&object-fit=contain |
|---|
| 139 | | }}} 이미지의 원본 비율을 유지하면서 지정된 너비와 높이 내에 포함되도록 조절됩니다. 여백이 생길 수 있습니다.}}}}}} || |
|---|
| 127 | }}} |
|---|
| 128 | 모바일에선 최대로 보이게 하려고 PC에서 파일의 너비를 최대로 하거나, PC에서 파일의 너비를 적절하게 설정했지만 모바일에선 가로로 슬라이드해서 이미지를 봐야 하는 상황을 막기 위해 다음과 같이 할 수 있습니다. |
|---|
| 129 | {{{||<width=숫자>[[파일:example.png|width=100%]]|| |
|---|
| 130 | }}} |
|---|
| 131 | 이렇게 하면 PC에선 적절한 너비로 볼 수 있고, 모바일에선 화면 크기에 맞춘 이미지를 볼 수 있으며, 아래에 이미지가 있다면 적절한 간격으로 떨어지는 효과를 볼 수 있습니다. 추가로 {{{<tablealign=center / right>}}}를 사용해 이미지의 위치도 지정할 수 있게 됩니다. 틀의 배경이 불편하다면 다음과 같이 사용할 수 있습니다. |
|---|
| 132 | {{{||<width=숫자><nopad>[[파일:example.png|width=100%]]|| |
|---|
| 133 | }}}이렇게 하면 틀의 배경이 보이지 않으면서 위의 효과들을 볼 수 있고, {{{<tablebordercolor=색깔>}}}을 이용한다면 적절한 테두리 색까지 입힐 수 있게 됩니다. |
|---|
| 134 | [각주] |
|---|
| 135 | == 동영상 == |
|---|
| 136 | {{{#!wiki style="word-break: keep-all" |
|---|
| 137 | * '''관련 심화 문법''': [[하트위키:문법 도움말/심화#동영상 심화|매크로를 지원하지 않는 플랫폼의 동영상 삽입]] |
|---|
| 138 | 매크로를 이용하여 외부 사이트의 동영상을 첨부할 수 있습니다. 기본적으로 {{{[코드(아이디)]}}} 형식으로 입력합니다. |
|---|
| 139 | ||<tablebgcolor=#fff,#2d2f34><rowbgcolor=#00a495><rowcolor=#fff><width=70> 플랫폼 || 입력 || 주소 내 아이디 위치 || |
|---|
| 140 | || [[유튜브]] || {{{[youtube(jNQXAC9IVRw)]}}} ||https://www.youtube.com/watch?v={{{#red '''jNQXAC9IVRw'''}}}[br]https://youtu.be/{{{#red '''jNQXAC9IVRw'''}}}|| |
|---|
| 141 | || [[Vimeo]] || {{{[vimeo(584524359)]}}} ||https://vimeo.com/{{{#red '''584524359'''}}} || |
|---|
| 142 | ||<-3> 회색배경은 기타 문법 틀을 이용하여 삽입하므로, 다른 틀에 적용(include)시킬 수 없습니다. || |
|---|
| 143 | 매개변수를 이용해 동영상 속성을 지정할 수 있습니다. 입력 틀은 아래와 같습니다. |
|---|
| 144 | ||<tablebgcolor=#fff,#2d2f34><rowbgcolor=#00a495><rowcolor=#fff> 유형 || 입력 || 예시 || |
|---|
| 145 | || 단일 매개변수 || {{{[코드(아이디, 매개변수)]}}} ||{{{[youtube(jNQXAC9IVRw, start=8)]}}}|| |
|---|
| 146 | || 매개변수 중첩 || {{{[코드(아이디, 매개변수1, 매개변수2,...)]}}} ||{{{[youtube(jNQXAC9IVRw, width=640, height=360)]}}}|| |
|---|
| 147 | 매개 변수의 종류는 다음과 같습니다. |
|---|
| 126 | |
|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 161 | 127 | }}} |
|---|
| 162 | 128 | 모바일에선 최대로 보이게 하려고 PC에서 파일의 너비를 최대로 하거나, PC에서 파일의 너비를 적절하게 설정했지만 모바일에선 가로로 슬라이드해서 이미지를 봐야 하는 상황을 막기 위해 다음과 같이 할 수 있습니다. |
|---|
| 163 | 129 | {{{||<width=숫자>[[파일:example.png|width=100%]]|| |
|---|
| ... | ... | |
|---|